<template>
  <div class="sunburstLabelRotate" id="sunburstLabelRotate"></div>
</template>

<script>
export default {
  name: "sunburstLabelRotate",
  //import引入的组件需要注入到对象中才能使用",
  components: {},
  data() {
    //这里存放数据",
    return {};
  },
  //监听属性 类似于data概念",
  computed: {},
  //监控data中的数据变化",
  watch: {},
  //方法集合",
  methods: {
    drawSunburstLabelRotate() {
      // 基于准备好的dom，初始化echarts实例
      let sunburstLabelRotate = this.$echarts.init(
        document.getElementById("sunburstLabelRotate")
      );
      // 绘制图表
      sunburstLabelRotate.setOption({
        silent: true,
        series: [
          {
            radius: ["15%", "80%"],
            type: "sunburst",
            sort: null,
            emphasis: {
              focus: "ancestor"
            },
            data: [
              {
                value: 8,
                children: [
                  {
                    value: 4,
                    children: [
                      {
                        value: 2
                      },
                      {
                        value: 1
                      },
                      {
                        value: 1
                      },
                      {
                        value: 0.5
                      }
                    ]
                  },
                  {
                    value: 2
                  }
                ]
              },
              {
                value: 4,
                children: [
                  {
                    children: [
                      {
                        value: 2
                      }
                    ]
                  }
                ]
              },
              {
                value: 4,
                children: [
                  {
                    children: [
                      {
                        value: 2
                      }
                    ]
                  }
                ]
              },
              {
                value: 3,
                children: [
                  {
                    children: [
                      {
                        value: 1
                      }
                    ]
                  }
                ]
              }
            ],
            label: {
              color: "#000",
              textBorderColor: "#fff",
              textBorderWidth: 2,
              formatter: function(param) {
                var depth = param.treePathInfo.length;
                if (depth === 2) {
                  return "radial";
                } else if (depth === 3) {
                  return "tangential";
                } else if (depth === 4) {
                  return "0";
                }
              }
            },
            levels: [
              {},
              {
                itemStyle: {
                  color: "#CD4949"
                },
                label: {
                  rotate: "radial"
                }
              },
              {
                itemStyle: {
                  color: "#F47251"
                },
                label: {
                  rotate: "tangential"
                }
              },
              {
                itemStyle: {
                  color: "#FFC75F"
                },
                label: {
                  rotate: 0
                }
              }
            ]
          }
        ]
      });
    }
  },
  //生命周期 - 创建之前",数据模型未加载,方法未加载,html模板未加载
  beforeCreate() {},

  //生命周期 - 创建完成（可以访问当前this实例）",数据模型已加载，方法已加载,html模板已加载,html模板未渲染
  created() {},
  //生命周期 - 挂载之前",html模板未渲染
  beforeMount() {},

  //生命周期 - 挂载完成（可以访问DOM元素）",html模板已渲染
  mounted() {
    this.drawSunburstLabelRotate();
  },

  //生命周期 - 更新之前",数据模型已更新,html模板未更新
  beforeUpdate() {},
  //生命周期 - 更新之后",数据模型已更新,html模板已更新
  updated() {},
  //生命周期 - 销毁之前",
  beforeDestroy() {},
  destroyed() {},
  //生命周期 - 销毁完成",
  //如果页面有keep-alive缓存功能，这个函数会触发",
  activated() {}
};
</script>

<style>
.sunburstLabelRotate {
  width: 100%;
  height: 300px;
}
</style>
